<template>
  <div id="ship">
    <page-header
      :title="title"
      :custom="custom"
      @addPanel="addPanelHandle"
    ></page-header>
    <el-row :gutter="8" class="main-panel">
      <el-col :span="8" class="column">
        <renderPanel
          :panelList="renderPanelLeft"
          :chartShowDataInfo="chartShowDataInfo"
          :panelChartInfo="panelChartInfo"
          @dropdownSelect="dropdownSelect"
          @
        ></renderPanel>
      </el-col>
      <el-col :span="8" class="column column-middle">
        <renderPanel
          :panelList="renderPanelCenter"
          :chartShowDataInfo="chartShowDataInfo"
          :panelChartInfo="panelChartInfo"
          @dropdownSelect="dropdownSelect"
        ></renderPanel>
      </el-col>
      <el-col :span="8" class="column">
        <renderPanel
          :panelList="renderPanelRight"
          :chartShowDataInfo="chartShowDataInfo"
          :panelChartInfo="panelChartInfo"
          @dropdownSelect="dropdownSelect"
        ></renderPanel>
      </el-col>
    </el-row>
    <map-chart @mapClick="cityChange"></map-chart>
    <el-dialog title="编辑面板" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="面板标题" label-width="120px">
          <el-input
            v-model="panelTitle"
            placeholder="输入面板标题"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="面板位置" label-width="120px">
          <el-select v-model="panelPosition" placeholder="输入面板位置">
            <el-option
              v-for="item in positionSelect"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            editPanelHandle({
              id: panelId,
              title: panelTitle,
              position: panelPosition,
            })
          "
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pageHeader from "../components/pageHeader.vue";
import { request } from "../utils";
import mapChart from "../components/map/mapchart.vue";
import renderPanel from "./renderPanel.vue";
const positionSelect = [
  { name: "左", value: "left" },
  { name: "中", value: "center" },
  { name: "右", value: "right" },
];
export default {
  name: "ship",
  components: {
    pageHeader,
    mapChart,
    renderPanel,
  },
  data() {
    return {
      title: "入境船舶疫情防控动态预警系统",
      custom: "湛江海关",
      subpath: "",
      subSystemInfo: null,
      panelList: [],
      panelChartInfo: {},
      chartShowDataInfo: {},
      timer: null,

      panelTitle: undefined,
      positionSelect,
      dialogFormVisible: false,
      panelPosition: "left",
    };
  },
  computed: {
    renderPanelLeft: function () {
      return this.panelList.filter((p) => p.panelLocation === "left");
    },
    renderPanelCenter: function () {
      return this.panelList.filter((p) => p.panelLocation === "center");
    },
    renderPanelRight: function () {
      return this.panelList.filter((p) => p.panelLocation === "right");
    },
  },
  created() {
    this.subpath = this.$route.params.subPath;
  },
  mounted() {
    this.getSubSystemInfo();
    this.getPanelList();
    window.onresize = () => {
      return (() => {
        setTimeout("location.reload();", 200);
      })();
    };
  },
  watch: {},
  methods: {
    dropdownSelect(data) {
      const { id, type } = data;
      if (type === "edit") {
        this.goPanel(id);
      } else if (type === "delete") {
        this.delPanel(id);
      } else if (type === "refresh") {
        this.getPanelInfo(id);
      }
    },
    cityChange(params) {
      console.log("click params", params);
      //没有数据的不点
      if (params.data === undefined) {
        return;
      }
      this.custom = params.data.name;
    },
    // 添加panel
    addPanelHandle({ title, position }) {
      request({
        method: "POST",
        url: `/public/systempage/${this.subpath}/addPanel`,
        data: {
          panelTitle: title,
          panelLocation: position,
        },
      }).then(() => {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
        this.getPanelList();
      });
    },
    // 编辑面板
    editPanelHandle({ id, title, position }) {
      request({
        method: "PUT",
        url: this.portInterface.updatePanelInfo + id,
        data: {
          panelTitle: title,
          panelLocation: position,
        },
      }).then(() => {
        this.$message({
          showClose: true,
          message: "更新成功",
          type: "success",
        });
        setTimeout(() => {
          this.dialogFormVisible = false;
        }, 1000);
        this.getPanelList();
      });
    },
    // 获取面板信息
    getPanelInfo(id) {
      return request({
        method: "GET",
        url: this.portInterface.getPanelInfo + id,
      }).then((res) => {
        this.panelTitle = res.result.panelTitle;
        this.panelPosition = res.result.panelLocation;
        this.panelId = res.result.panelId;
        this.dialogFormVisible = true;
      });
    },
    // 跳转到对应的页面
    goPanel(panelId) {
      const subpath = this.$route.params.subPath;
      this.$router.push({
        path: `/addPanel/subPath/${subpath}/chart/table`,
        query: {
          panelId,
        },
      });
    },
    // 获取子系统信息 - 可以不需要
    getSubSystemInfo() {
      request({
        method: "GET",
        url: `/public/systempage/${this.subpath}/getinfo`,
        params: {},
      }).then((res) => {
        this.subSystemInfo = res.result;
        this.title = res.result.systemPageTitle;
        this.$store.commit("setSubSystemInfo", res.result);
      });
    },

    // 获取子系统面板
    getPanelList() {
      request({
        method: "GET",
        url: `/public/systempage/${this.subpath}/getpanellist`,
        params: {},
      }).then((res) => {
        // console.log("zct getPanelList", res);
        this.panelList = res.result;
        res.result.forEach((element) => {
          this.getPanelCharts(element.panelId);
        });
      });
      clearTimeout(this.timer);
      this.timer = setTimeout(this.getPanelList, 150000);
    },

    // 删除子面板
    delPanel(panelId) {
      request({
        method: "DELETE",
        url: `/public/systempage/${this.subpath}/delpanel`,
        params: { panelId },
      }).then(() => {
        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
        this.getPanelList();
      });
    },

    getPanelCharts(panelId) {
      request({
        method: "GET",
        url: `/public/panel/getcharts/${panelId}`,
        params: {},
      }).then((res) => {
        const chartListObj = {};
        res.result.forEach((item) => {
          const { chartId, panelId } = item;
          const newchartJson = JSON.parse(item.chartJson);
          const title = newchartJson?.baseOption?.title.text;
          const chartInfo = {
            ...item,
            chartName: title,
            optionInfo: newchartJson,
          };
          chartListObj[item.chartId] = chartInfo;
          this.getSQLParamsInfo(panelId, chartId).then((res) => {
            const param = res.result;
            this.getChartsInfo(panelId, chartId, param);
          });
          return chartInfo;
        });

        this.panelChartInfo = {
          ...this.panelChartInfo,
          [panelId]: chartListObj,
        };
      });
    },

    getSQLParamsInfo(panelId, chartId) {
      return request({
        method: "GET",
        url: `/public/panel/getsqlparams/${panelId}`,
        params: { chartId },
      });
    },

    getChartsInfo(panelId, chartId, param) {
      request({
        method: "POST",
        url: `/public/panel/getsqldata/${panelId}`,
        params: { chartId },
        data: {
          ...param,
        },
      }).then((res) => {
        this.chartShowDataInfo = {
          ...this.chartShowDataInfo,
          [`${panelId}/${chartId}`]: res.result,
        };
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main-panel {
  height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px;
  scrollbar-width: none;
}
.main-panel>div{
  height: 100%;
}
.main-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.el-row {
  margin: 0 !important;
}
</style>
